<%--
  Created by IntelliJ IDEA.
  User: 顾竣尹
  Date: 2024/12/5
  Time: 下午7:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-STORE</title>
    <style>
        .table {
            width: 100%;
            text-align: left;
            border-radius: 2px 2px 0 0;
            border-collapse: separate;
            border-spacing: 0;
        }

        .th {
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
            text-align: left;
            background: #fafafa;
            border-bottom: 1px solid #f0f0f0;
            transition: background 0.3s ease;
        }

        .th.num-th {
            flex: 1.5;
        }

        .th {
            text-align: center;
        }

        .th:nth-child(4),
        .th:nth-child(5),
        .th:nth-child(6),
        .th:nth-child(7) {
            text-align: center;
        }

        .tr {
            display: flex;
        }

        .th,
        .td {
            position: relative;
            padding: 16px 16px;
            overflow-wrap: break-word;
            flex: 1;
        }

        .table img {
            width: 100px;
            height: 100px;
        }

        .tr {
            display: flex;
            cursor: pointer;
            border-bottom: 1px solid #ebeef5;
        }

        .tr.active {
            background-color: #f5f7fa;
        }

        .td {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        input[type="checkbox"]{
            appearance: none;
            background: url(static/img/未勾选.png) no-repeat;
            background-size: cover;
            width: 25px;
            height: 25px;
        }
        input[type="checkbox"]:checked{
            background-image: url(static/img/勾选.png);
        }
        .my-input-number {
            display: flex;
        }

        .my-input-number button {
            height: 40px;
            color: #333;
            border: 1px solid #dcdfe6;
            background-color: #f5f7fa;
        }

        .my-input-number button:disabled {
            cursor: not-allowed !important;
        }

        .my-input-number .my-input__inner {
            line-height: 40px;
            text-align: center;
            height: 40px;
            width: 50px;
            padding: 0;
            border: none;
            border-top: 1px solid #dcdfe6;
            border-bottom: 1px solid #dcdfe6;
        }
        .right .tbody{
            height:500px;
            overflow-y:scroll;
        }
        .right .tbody::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        .right .tbody::-webkit-scrollbar-thumb {
            background-color: #d9d9d9;
            border-radius: 10px;
            border: 2px solid #f0f0f0;
        }
        .right .tbody::-webkit-scrollbar-track {
            background-color: #f0f0f0;
        }
        button {
            outline: 0;
            box-shadow: none;
            color: #fff;
            background: #d9363e;
            border-color: #d9363e;
            color: #fff;
            background: #d9363e;
            border-color: #d9363e;
            line-height: 1.5715;
            position: relative;
            display: inline-block;
            font-weight: 400;
            white-space: nowrap;
            text-align: center;
            background-image: none;
            border: 1px solid transparent;
            box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            touch-action: manipulation;
            height: 32px;
            padding: 4px 15px;
            font-size: 14px;
            border-radius: 2px;
        }

        button.pay {
            background-color: #3f85ed;
            margin-left: 20px;
        }

        .bottom {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 20px;
            border: 1px solid #f0f0f0;
            border-top: none;
            padding-left: 20px;
        }

        .right-box {
            display: flex;
            align-items: center;
        }

        .check-all {
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .check-all input[type="checkbox"]{
            margin-right: 5px;
        }
        .price {
            font-size: 30px;
            /*font-weight: 700;*/
        }

        .price-box {
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body>
<div class="right">
    <div class="top"></div>
    <div class="breadcrumb">
        <span>购物车</span>
    </div>
    <div class="cart">
        <div class="table">
            <div class="thead">
                <div class="tr">
                    <div class="th">选中</div>
                    <div class="th th-pic">图片</div>
                    <div class="th">单价</div>
                    <div class="th num-th">个数</div>
                    <div class="th">小计</div>
                    <div class="th">操作</div>
                </div>
            </div>
            <div class="tbody">
                <div class="tr" :class="{active:item.isChecked}" v-for="(item,index) in goodsList" :key="item.id">
                    <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
                    <div class="td"><img :src="`static/img/productImages/`+item.picture" alt="照片丢失" /></div>
                    <div class="td">{{item.sell_price}}</div>
                    <div class="td">
                        <div class="my-input-number">
                            <button class="decrease" @click="item.number--" :disabled="item.number<=1"> - </button>
                            <span class="my-input__inner">{{item.number}}</span>
                            <button class="increase" @click="item.number++"> + </button>
                        </div>
                    </div>
                    <div class="td">{{item.number * item.sell_price}}</div>
                    <div class="td"><button @click="del(index)">删除</button></div>
                </div>
            </div>
            <!-- 底部 -->
            <div class="bottom">
                <!-- 全选 -->
                <label class="check-all">
                    <input type="checkbox" v-model="isAll" />
                    全选
                </label>
                <div class="right-box">
                    <!-- 所有商品总价 -->
                    <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span
                            class="price">{{totalPrice}}</span></span>
                    <!-- 结算按钮 -->
                    <button class="pay" @click="showOrder">提交订单( {{totalCount}} )</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="static/js/vue-2.6.10.js"></script>
<script src="static/js/axios.min.js"></script>
<script>
    let app =new Vue({
        el: '.right',
        data() {
            return {
                goodsList: [
                    {id:1,picture:'1195000845831.jpg',number:1,isChecked:true,sell_price:50},
                    {id:2,picture:'1195000845831.jpg',number:1,isChecked:true,sell_price:50},
                    {id:3,picture:'1195000845831.jpg',number:1,isChecked:true,sell_price:50},
                ]
            }
        },
        created(){
            axios({
                url:'getCar.do',
            }).then(re=>{
                console.log(re)
                re.data.forEach(item=>{
                    item.isChecked=true
                })
                this.goodsList=re.data
            })
        },
        methods: {
            del(index) {
                this.goodsList.splice(index, 1)
                // console.log(index)
            },
            showOrder() {
                axios({
                    url:'SubmitOrder.do',
                    data:{
                        'total_price':app.totalPrice,
                        'shopping_cars':app.goodsList
                    },
                    method:'post',
                    headers:{'Content-Type': 'application/json'}
                }).then(re=>{
                    if(re.data.length>0){
                        console.log(re.data)
                        window.location.href='index.jsp'
                    }else{
                        window.location.href='login.jsp'
                    }
                })
            }
        },
        computed: {
            isAll: {
                get() {
                    // 遍历数组，使用every 只有数组中的所有数据均符合条件，才会返回布尔值
                    return this.goodsList.every(item => item.isChecked === true)
                },
                set(value) {
                    // 在本例中，通过点击，拿到框的布尔值，传给value，然后进行后续处理
                    this.goodsList.forEach(item => item.isChecked = value)
                }
            },
            // 计算总价
            totalPrice() {
                return this.goodsList.reduce((sum, item) => {
                    if (item.isChecked) {
                        // 只计算被选中的商品的价钱
                        return sum + (item.number * item.sell_price)
                    }else
                        // 没有选择商品，就是0
                        return sum
                }, 0)
            },
            // 计算总数量
            totalCount() {
                return this.goodsList.reduce((sum, item) => {
                    if (item.isChecked) {
                        return sum + item.number
                    }else
                        return sum
                }, 0)
            }
        }
    })
</script>
</body>

</html>
